<template>
  <div class="report-auto">
    <!-- @click="watchStatu" -->
    <div
      class="home-content"
      :class="`home-content-${field.options.reportInfoConfig.reportType}`"
    >
      <div class="header">
        <div class="left">
          <img
            src="@/components/assets/images/design/1-12.webp"
          />
        </div>
        <div class="middle" :style="getStyle('content')">
          {{ field.options.reportInfoConfig.content }}
        </div>
        <div class="right">
          <img
            src="@/components/assets/images/design/1-12.webp"
          />
        </div>
      </div>
      <div class="sub" v-if="true">
        <!--   磁条口   -->
        <img
          class="right"
          src="@/components/assets/images/design/patientCard.webp"
          alt="磁条口"
        />
        <!--   刷卡   -->
        <img
          class="left"
          src="@/components/assets/images/design/payCard.webp"
          alt="刷卡"
        />
      </div>
      <div class="sup" v-if="true">
        <!--   扫码   -->
        <img
          class="right"
          src="@/components/assets/images/design/sivlerMedical/saoMa.webp"
          alt="扫码"
        />
        <!--   插卡   -->
        <img
          class="left"
          src="@/components/assets/images/design/sivlerMedical/sheBaoKa.webp"
          alt="插卡"
        />
      </div>
      <div class="overFillHidden">
        <input
          type="password"
          autofocus
          ref="InputAutofocus"
          id="autofocusInput"
          v-model="enterValue"
          @blur="handleFocusInput"
          @keyup.enter="keyupEnter"
        />
      </div>
      <div class="backHome-button">
        <el-button  type="primary" size="large" color="#0059B3" @click="backHomeFn"
          >返回首页（{{ timerShow / 1000 }}秒）</el-button
        >
      </div>
      <div class="keyboard-button" @click="handleKeyboard">
        <span class="desc">手动输入就诊号</span>
        <van-icon name="arrow" />
      </div>
    </div>

    <!--全键盘-->
    <el-drawer
      size="44%"
      title="就诊号"
      :withHeader="false"
      :show-close="false"
      :visible.sync="drawer"
      :direction="direction"
      custom-class="custom-keyboard"
      :modal-append-to-body="false"
      :before-close="handleClose"
    >
      <div class="simple-keyboard-area" v-if="drawer">
        <CellGroup inset>
          <Field
            maxlength="18"
            v-model="value"
            class="input-area"
            label="就诊号/身份证号"
            label-align="top"
            placeholder="请输入就诊号"
          >
            <template #button>
              <van-button
                size="small"
                type="primary"
                @click="onKeyPress('{enter}')"
                >确定</van-button
              >
            </template>
          </Field>
          <div class="error-info" v-if="errorShow">{{ errorInfo }}</div>
        </CellGroup>

        <SimpleKeyboard
          @keyboardClose="handleClose"
          ref="simpleKeyboard"
          @onChange="onChange"
          @onKeyPress="onKeyPress"
          :input="value"
        />
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { Field, CellGroup } from "vant";
import SimpleKeyboard from "@c/public/layer/scenes/simpleKeyboard/index.vue";
import { pxToVw } from "@/utils/common";

export default {
  name: "reportAuto-sivler",

  components: {
    CellGroup,
    Field,
    SimpleKeyboard,
  },

  props: {
    field: {
      type: Object,
    },
  },

  data() {
    return {
      drawer: false,
      value: "",
      enterValue: "",
      errorShow: false,
      errorInfo: "就诊号/身份证不可以为空",
      direction: "btt",
      timeout: null,
      // timeoutDuration: 15 * 1000, //10min
      timeoutDuration: 15000, //10min
      timerid: undefined,
      timerShow: 15000,
    };
  },

  computed: {
    getStyle() {
      return function (val) {
        const self = this;
        let info = self.field?.options?.reportInfoConfig || Array();
        let obj = Object();
        switch (val) {
          case "content":
            Reflect.set(obj, "color", info.fontColor);
            Reflect.set(obj, "fontSize", pxToVw(info.fontSize));
            return obj;
        }
      };
    },
  },
  mounted() {
    //step5 监听页面操作，触发重置超时函数
    window.addEventListener("mousemove", this.resetTimeout);
    window.addEventListener("keydown", this.resetTimeout);
    window.addEventListener("click", this.resetTimeout);
    this.resetTimeout();
    // this.watchStatu();
    this.handleFocusInput();
  },

  methods: {
    timerShowDel() {
      if (this.timerid) clearInterval(this.timerid);
      this.timerShow = 15000;
      this.timerid = setInterval(() => {
        this.timerShow = this.timerShow - 1000;
        console.log(11);
        // 到达时间--返回首页-清空定时器
        if (this.timerShow <= 0) {
          this.closekeyboard()
          clearInterval(this.timerid);
        }
      }, 1000);
    },
    backHomeFn() {
      this.$emit("handleBack");
    },
    keyupEnter(value) {
      const self = this;
      if (self.enterValue.trim().length > 0) {
        let params = Object();
        Reflect.set(params, "number", self.enterValue);
        // self.$emit("handleSubmit", params);
        self.$emit("handleHiddenSubmit", params);
        self.handleClose();
      } else {
        this.errorShow = true;
        console.log("提示错误信息");
      }
      this.enterValue = "";
    },
    handleFocusInput() {
      console.log("失焦");
      const self = this;
      setTimeout(() => {
        self.$refs.InputAutofocus?.focus();
      }, 0);
    },
    watchStatu() {
      this.$refs.InputAutofocus.focus();
      document.addEventListener(
        "mousedown",
        function (e) {
          console.log(111);
          if (e.target.id !== "autofocusInput") {
            e.preventDefault();
          }
        },
        false
      );
    },

    // 全键盘呼起时间
    handleKeyboard() {
      this.drawer = true;
    },

    handleClose() {
      this.drawer = false;
      this.errorShow = false;
      this.value = "";
    },

    // 隐藏键盘
    closekeyboard() {
      this.drawer = false;
      this.errorShow = false;
      this.value = "";
      this.$emit("handleBack");
    },

    // 点击事件
    onChange(val) {
      this.value = val;
    },

    onKeyPress(button) {
      const self = this;
      this.errorShow = false;
      if (button === "{enter}") {
        // 如果按确认键的相应操作
        if (self.value.trim().length > 0) {
          let params = Object();
          Reflect.set(params, "number", self.value);
          self.$emit("handleSubmit", params);
          self.handleClose();
        } else {
          this.errorShow = true;
          console.log("提示错误信息");
        }
      }
      if (button === "{bksp}") {
        // 删除键的相应操作
        console.log("bksp");
      }
    },

    onInputChange(val) {
      this.value = val.target.value;
    },

    resetTimeout() {
      // if (!!this.timeout) {
      //   clearTimeout(this.timeout);
      // }
      // // 特定时间不做操作关闭抽屉-清空数据
      // this.timeout = setTimeout(this.closekeyboard, this.timeoutDuration);
      this.timerShowDel();
    },
  },

  destroyed() {
    console.log("destroyed");
    window.removeEventListener("mousemove", this.resetTimeout);
    window.removeEventListener("keydown", this.resetTimeout);
    window.removeEventListener("click", this.resetTimeout);
    window.removeEventListener("mousedown", this.resetTimeout);
  },
};
</script>


<style lang="scss" scoped>
.overFillHidden {
  width: 0.1px;
  height: 0.1px;
  overflow: hidden;
}
.report-auto {
  // height: 78%;
  flex: 1;
  width: 100%;

  .home-content {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;

    .header {
      text-align: center;
      font-weight: 500;
      font-size: 60px;
      color: #333333;
      padding: 42px 0;
      display: flex;
      justify-content: flex-end;

      .left {
        display: inline-block;
        width: 66px;
        height: 66px;
        align-self: center;
        position: relative;
        top: -20px;

        img {
          height: 100%;
          width: 100%;
          align-items: center;
          align-self: center;
        }
      }

      .middle {
        width: 400px;
        margin: 0 32px;
        font-size: 60px;
        color: #333333;
        line-height: 1.4;
        font-weight: normal;
        align-self: self-end;
        text-align: left;
        font-style: normal;
        @include fontWeight();
      }

      .right {
        display: inline-block;
        width: 66px;
        height: 66px;
        position: relative;
        top: -20px;
        align-items: center;
        align-self: center;

        img {
          height: 100%;
          width: 100%;
          align-items: center;
          align-self: center;
        }
      }
    }

    .sub {
      position: absolute;
      right: -6px;
      top: 410px;

      img {
        width: 326px;
      }

      .right {
        position: relative;
        // left: 10px;
        top: 20px;
      }
      .left {
        position: relative;
        // left: 10px;
        top: 20px;
      }
    }

    .sup {
      position: absolute;
      right: -6px;
      top: 820px;

      img {
        width: 326px;
      }
      .left {
        position: relative;
        left: 10px;
        top: 90px;
      }
      .right {
        position: relative;
        left: 10px;
        top: 90px;
      }
    }
    .backHome-button {
      height: 82px;
      line-height: 82px;
      position: absolute;
      bottom: 70px;
      left: 42px;
      
      .el-button--large{
        font-size: 42px;
      }
    }
    .keyboard-button {
      background: white;
      font-size: 42px;
      color: #1e90ff;
      line-height: 82px;
      border-radius: 100px;
      text-align: center;
      position: absolute;
      bottom: 60px;
      right: 42px;
      cursor: pointer;
      padding: 10px 110px;
      @include fontWeight();

      i {
        font-weight: bold;
      }
    }
  }

  .home-content-1 {
    background: url("~@a/images/design/sivlerMedical/1-14×2-sivler.png")
      no-repeat top;
    background-size: cover;
    .sub {
      position: absolute;
      right: -6px;
      top: 460px;
    }

    .sup {
      position: absolute;
      right: -6px;
      top: 920px;
    }

    .keyboard-button {
      bottom: 50px;
      right: 42px;
    }
  }

  .home-content-2 {
    background: url("~@a/images/design/sivlerMedical/1-14×2-sivler.png")
      no-repeat top;
    background-size: contain;
  }
}

:deep(.custom-keyboard) {
  .input-area {
    font-size: 48px;
    padding: 24px 0;

    margin-top: 70px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;

    .van-field__label {
      width: 100%;
      font-size: 42px;
      background: transparent;
      margin-bottom: 40px;
      padding: 0 20px;
      align-self: center;
    }

    .van-field__value {
      background: #ebeef5;
      border-radius: 16px;
      overflow: hidden;
      padding: 0 0 0 24px;
    }

    .van-field__button {
      height: 110px;
      display: flex;
      padding-left: 0 !important;

      .van-button {
        height: 100%;
        overflow: hidden;
        border-radius: 8px;
        font-size: 48px;
        padding: 0 !important;
        background: #5cadff;
        width: 200px;
      }
    }
  }

  .error-info {
    font-size: 44px;
    color: #ed6a0c;
    border: none !important;
    background: transparent !important;
  }
}
</style>
